<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Menu Example</title>
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
            rel="stylesheet"
        >
    </head>
    <body>
        <div class="background">
            <div class="menu__wrapper">
                <div class="menu__bar">
                    <a
                        href="#"
                        title="Logo"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" class="logo" width="180" height="180"  viewBox="0 0 180 180" fill="none">
                            <path d="M82.646 37.0917C85.7401 35.3054 89.552 35.3054 92.646 37.0917L133.614 60.7445L105.286 77.3318C100.901 72.9296 94.8325 70.2051 88.128 70.2051C81.1554 70.2051 74.871 73.1519 70.4523 77.8681L41.4416 60.8811L82.646 37.0917Z" fill="white"/>
                            <path d="M64.9303 87.4484L35.9141 70.4582V117.952L64.8222 101.025C64.2287 98.9258 63.9111 96.7109 63.9111 94.4219C63.9111 91.9977 64.2673 89.6567 64.9303 87.4484Z" fill="white"/>
                            <path d="M70.1924 110.694L41.8975 127.262L82.646 150.788C85.74 152.574 89.552 152.574 92.646 150.788L133.158 127.398L105.556 111.236C101.152 115.8 94.9714 118.639 88.128 118.639C81.0175 118.639 74.6227 115.574 70.1924 110.694Z" fill="white"/>
                            <path d="M111.22 101.739L139.376 118.226C139.377 118.162 139.378 118.098 139.378 118.034V70.1831L111.101 86.7403C111.908 89.154 112.345 91.7369 112.345 94.4219C112.345 96.9723 111.951 99.4305 111.22 101.739Z" fill="white"/>
                        </svg>
                    </a>
                    <img
                        class="menu-icon"
                        src="assets/burger-menu.svg"
                        title='Burger Menu'
                        alt='Burger Menu'
                        onclick="toggleMenu(this)"
                    >
                    <ul class="navigation">
                        <li>
                            <a
                               href="#services"
                               title="Services"
                            >
                                Services
                            </a>
                        </li>
                        <li>
                            <a
                                href="#blog"
                                title="Blog"
                            >
                                Blog
                            </a>
                        </li>
                        <li>
                            <a
                                href="#about"
                                title="About"
                            >
                                About
                            </a>
                        </li>
                        <li>
                            <a
                                href="#contact-us"
                                title="Contact Us"
                            >
                                Contact Us
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

